{% extends "admin42/platformmgr/base.html" %}
{% load admin_utils %}
{% block main_content %}
<div id="deploy-failure-tips" style="width: 100%;" class="p20">
    <bk-button :theme="'primary'" :title="'添加提示'" class="mr10" @click="handleCreate">
        添加智能提示
    </bk-button>
    <bk-table :data="data" :cell-class-name="cellStyleCallback" style="margin-top: 20px;">
        <bk-table-column width="45" label="id" prop="id">
        </bk-table-column>
        <bk-table-column label="匹配正则" prop="value"></bk-table-column>
        <bk-table-column label="关联标签" prop="tag_str" width="300">
        </bk-table-column>
        <bk-table-column label="添加时间" prop="created"></bk-table-column>
        <bk-table-column label="操作">
            <template slot-scope="props">
                <bk-button class="mr10" text href="javascript:void(0);" @click="handleEdit(props.row)">编辑</bk-button>
                <bk-button theme="primary" text @click="handleDelete(props.row)" style="color: rgb(234, 54, 54);">删除</bk-button>
            </template>
        </bk-table-column>
    </bk-table>

    <bk-dialog v-model="dialog.visible" header-position="left" width="800" :confirm-fn="submitDialog" @cancel="cancelDialog" :mask-close="false" :fullscreen="dialog.fullscreen">
        <div slot="header">
            $[ dialog.type === 'create'?'添加':(dialog.type === 'edit'?'编辑':'删除') ]智能提示
        </div>
        <bk-form :label-width="120" :model="dialog.form">
            <bk-form-item label="匹配正则" :required="true">
                <bk-input v-model="dialog.form.value" :disabled="dialog.type === 'delete'"></bk-input>
            </bk-form-item>
            <bk-form-item label="关联标签" :required="true">
                <bk-input v-model="dialog.form.tag_str" type="url" :disabled="dialog.type === 'delete'"></bk-input>
            </bk-form-item>
        </bk-form>
    </bk-dialog>

    <pagination
        class="mt15"
        :current.sync="pagination.curPage"
        :limit="pagination.limit"
        :count="pagination.count"
        :align="'right'"
    />
</div>

{% endblock %}


{% block main_script %}
<script>
const pagination = {{ pagination | to_json }}
const failure_tips = {{ failure_tips | to_json }}


const URLRouter = {
    create: decodeURI("{% url 'admin.smart_advisor.deploy_failure_tips' %}"),
    list: decodeURI("{% url 'admin.smart_advisor.deploy_failure_tips' %}"),
    detail: decodeURI("{% url 'admin.smart_advisor.deploy_failure_tips.detail' '${id}' %}"),
}

document.addEventListener('DOMContentLoaded', () => {
    new Vue({
        el: "#deploy-failure-tips",
        delimiters: ['$[', ']'],
        mixins: [SubmitMixin],
        data: function () {
            let include_inactive = false
            let market_enabled = undefined
            return {
                data: failure_tips,
                pagination,
                advancedFilterForm: {
                    include_inactive,
                    market_enabled,
                },
                dialog: {
                    fullscreen: false,
                    form: {
                        value: '',
                        tag_str: '',
                    },
                    row: undefined
                },
                advancedFilterShow: false
            }
        },
        methods: {
            fillUrlTemplate: function (url_template, {row}) {
                if (!row)
                    row = {}
              return url_template.replace("${id}", row.id)
            },
            cancelDialog: function () {

            },
            processData: function (data) {
              return new Promise(resolve => {
                  // data.affinity_tags = JSON.stringify(data.affinity_tags)
                  resolve(data)
              })
            },
            submitCallback: function () {
                // 更新列表
                this.$http.get(URLRouter['list']).then(res => {
                    this.data = res.results
                })
            },
            handleCreate: function () {
                this.dialog.type = "create"
                this.dialog.row = undefined

                this.dialog.form = {
                    title: '',
                    short_description: '',
                    location: '',
                    affinity_tags: '',
                    priority: 1,
                }
                this.dialog.visible = true
            },
            handleEdit: function (row){
                this.dialog.type = "edit"
                this.dialog.row = row

                this.dialog.form = {
                    ...row,
                }
                this.dialog.visible = true
            },
            handleDelete: function (row) {
                this.dialog.type = "delete"
                this.dialog.row = row

                this.dialog.form = {
                    ...row,
                }

                this.dialog.visible = true
            },
            cellStyleCallback: function ({row, column, rowIndex, columnIndex}) {
                if (column.label === "关联标签")
                    return 'json-view'
            }
        },
    })
})

</script>
{% endblock %}
